<template>

  <h1 class="m-v-30">计算属性</h1>
  <h3 class="m-v-10">基础示例</h3>
  <div>
    1. {{author.name}}都出了很多书？模版表达式{{author.books.length?'yes':'no'}},计算属性结果{{publishedBooksMessage}}
  </div>
  <h3 class="m-v-10">Computed VS methods</h3>
  <div>
    1. {{author.name}}都出了很多书？方法获得{{manyBookd()}}
    2. 计算属性值会基于其响应式依赖被缓存
  </div>
  <h3 class="m-v-10">可写计算属性（setter）</h3>
  <div>
    1. 丹丹的全名是{{fullName}}
    2. <button @click="changeFullName">改变丹丹的全名</button>---{{firstName}},{{secondName}},{{fullName}}
  </div>
  <h3 class="m-v-10">注意</h3>
  <div>
    1. 不要在计算函数中做异步请求或者更改 DOM！<br>
    2. 避免直接修改计算属性值
  </div>
</template>

<script setup>
import { reactive, computed, ref } from "vue";

const author = reactive({
  name: 'John Deo',
  books: ['111', '222', '3333']
})


const publishedBooksMessage = computed(() => {
  return author.books.length ? 'yes' : 'no'
})

function manyBookd() {
  return author.books.length ? 'yes' : 'no'
}

const firstName = ref('liu')
const secondName = ref('dd')

const fullName = computed({
  get() {
    return firstName.value + " " + secondName.value
  },
  set(newValue) {
    [firstName.value, secondName.value] = newValue.split(' ')
  }
})

function changeFullName() {
  fullName.value = 'liu dandan'
}

</script>

<style lang="scss" scoped>
</style>